import React, { Fragment } from 'react'
import { View, StyleSheet, Text, LayoutAnimation, Keyboard } from 'react-native'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import * as Animatable from 'react-native-animatable'
import LinearGradient from 'react-native-linear-gradient'
import BasePage from 'src/pageP/base/base-page/index'
import NextButton from 'src/components/button/NextButton'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'
import CustomBoxShadow from 'src/components/boxshadow/CustomBoxShadow'
import DefaultImage from 'src/components/image/DefaultImage'
import BorderInput from './components/border-input'
import { openCamera, multipleAlums } from 'src/utils/ImagePickerUtil'
import { CommonToast, ShowLoading, DismissLoading } from 'src/utils/ToastUtil'
import {
  uploadImage,
  applyFamous,
  updateFamous,
  applyFamousState
} from 'src/utils/RequestAPI'
import { ServiceTelephone } from 'src/config/index'
import { CustomCallPhone } from 'src/utils/PermissionsUtil'
import { ScaleS, ScaleT, ONE_PIXEL, IS_IOS } from 'src/utils/ScreenUtil'
import { companyDefaultLogo } from 'src/utils/ConfigUtil'
import { showSelectModal } from 'src/utils/ModalUtil'
import { isEmptyObjectFn } from 'src/utils/JSTypeUtil'

import { connect } from 'react-redux'
// 发送行为
const mapDispatchToProps = dispatch => ({})

@connect(
  ({ userinfo, BMineCenterStore }) => ({
    userId: userinfo.B.userId,
    haveCompanyApply: BMineCenterStore.haveCompanyApply,
    company: BMineCenterStore.company
  }),
  mapDispatchToProps
)
class BCompanyApplyFamous extends BasePage {
  constructor (props) {
    super(props)
    const {
      company: { simpleName, companyLogo }
    } = this.props
    this.state = {
      header: {},
      simpleName, // 名企name
      companyLogo, // 名企logo
      companySlogan: null, // 企业slogan
      companyArea: null, // 公司面积
      companyHiringNeed: null, // 招聘需求
      companyBackground: null, // 背景展示
      companyRelation: null, // 关联企业
      companyMaster: 0, // 已通过企业，1非主管 2主管 3主管且在修改状态
      canEdit: true, // 表单输入是否可以点击
      saveBtnText: null, // 保存按钮文字
      saveBtnEnable: null, // 保存按钮高亮
      applyTip1: null, // 拒绝提示标题
      applyTip2: null, // 拒绝提示原因,
      tabState: {
        index: 0,
        routes: [{ key: 'first', title: '企业规模' }]
      }
    }
  }

  configState = () => {
    let canEdit,
      companySlogan,
      companyArea,
      companyHiringNeed,
      companyBackground,
      companyRelation,
      companyMaster,
      saveBtnText,
      saveBtnEnable,
      applyTip1,
      applyTip2,
      tabState
    let { simpleName, companyLogo } = this.state
    tabState = {
      index: 0,
      routes: [{ key: 'first', title: '企业规模' }]
    }
    if (!this.applyFamousState) {
      canEdit = true
      saveBtnText = '申请'
      saveBtnEnable = false
    } else {
      canEdit = false
      simpleName = this.applyFamousState.simpleName
      companyLogo = this.applyFamousState.logo
      companySlogan = this.applyFamousState.slogan
      companyArea = this.applyFamousState.area
      companyHiringNeed = this.applyFamousState.hiringNeed
      companyBackground = this.applyFamousState.background
      if (
        this.applyFamousState.relationCompany &&
        this.applyFamousState.relationCompany.length
      ) {
        companyRelation = this.applyFamousState.relationCompany
      }
      const { state } = this.applyFamousState
      switch (state) {
        case 'WAIT_AUDIT':
          /* 申请中 */
          saveBtnText = '申请中...'
          saveBtnEnable = false
          break
        case 'REFUSE':
          // 拒绝
          canEdit = true
          saveBtnText = '重新申请'
          saveBtnEnable = true
          applyTip1 = '您的申请被拒绝'
          applyTip2 = `拒绝原因：${this.applyFamousState.refuseReason}`
          break
        case 'LONG_REFUSE':
          // 永久拒绝
          saveBtnText = ''
          saveBtnEnable = false
          applyTip1 = '您的申请被拒绝'
          applyTip2 = `拒绝原因：${this.applyFamousState.refuseReason}`
          break
        case 'INLINE':
          // 下线
          saveBtnText = '企业已下线'
          saveBtnEnable = false
          break
        case 'ONLINNE':
          // 上线
          const {
            company: { companyId }
          } = this.props
          companyMaster =
            (companyRelation.find(e => e.master) || {}).companyId == companyId
              ? 2
              : 1
          saveBtnText = ''
          saveBtnEnable = false
          tabState = {
            index: 0,
            routes: [
              { key: 'first', title: '企业规模' },
              { key: 'second', title: '关联企业' }
            ]
          }
          break
        case 'RECOMMEND':
          // 推荐
          companyMaster =
            (companyRelation.find(e => e.master) || {}).companyId == companyId
              ? 2
              : 1
          saveBtnText = ''
          saveBtnEnable = false
          tabState = {
            index: 0,
            routes: [
              { key: 'first', title: '企业规模' },
              { key: 'second', title: '关联企业' }
            ]
          }
          break
        default:
          break
      }
    }
    LayoutAnimation.easeInEaseOut()
    this.setState({
      canEdit,
      simpleName,
      companyLogo,
      companySlogan,
      companyArea,
      companyHiringNeed,
      companyBackground,
      companyRelation,
      companyMaster,
      saveBtnText,
      saveBtnEnable,
      applyTip1,
      applyTip2,
      tabState
    })
    return {
      canEdit,
      simpleName,
      companyLogo,
      companySlogan,
      companyArea,
      companyHiringNeed,
      companyBackground,
      companyRelation,
      companyMaster,
      saveBtnText,
      saveBtnEnable,
      applyTip1,
      applyTip2,
      tabState
    }
  }

  static getDerivedStateFromProps (props, state) {
    // console.log('getDerivedStateFromProps', state)
    return BCompanyApplyFamous.saveButtonEnable(state)
  }

  static saveButtonEnable (state, tip = false) {
    const { canEdit } = state
    if (canEdit) {
      const {
        simpleName,
        companyLogo,
        companySlogan,
        companyArea,
        companyHiringNeed,
        companyBackground
      } = state

      const saveBtnEnable = [
        {
          key: simpleName,
          value: '企业简称'
        },
        {
          key: companyLogo,
          value: '企业Logo'
        },
        {
          key: companySlogan,
          value: '企业slogan'
        },
        {
          key: companyArea,
          value: '公司面积'
        },
        {
          key: companyHiringNeed,
          value: '招聘需求'
        },
        {
          key: companyBackground,
          value: '背景展示'
        }
      ].every(e => {
        if (tip && !e.key) {
          CommonToast(`请完善${e.value}`)
        }
        return e.key
      })
      if (state.saveBtnEnable !== saveBtnEnable) {
        console.log('saveEnable change----->', saveBtnEnable)
        return {
          saveBtnEnable
        }
      }
    }
    return null
  }

  componentDidMount () {
    const {
      company: { companyId }
    } = this.props
    ShowLoading()
    applyFamousState({ headers: { companyId } })
      .then(res => {
        if (!isEmptyObjectFn(res.data)) {
          this.applyFamousState = res.data
        }
      })
      .finally(() => {
        this.configState()
        DismissLoading()
      })
  }

  renderNavigationBarChild () {
    const { companyMaster } = this.state
    return (
      <Fragment>
        <Text style={styles.navigationTitle}>名企申请</Text>
        {companyMaster === 2 && (
          <CustomButton style={styles.naviBtn} onPress={this._modifyBtnClick}>
            <Text style={styles.naviTxt}>修改</Text>
          </CustomButton>
        )}
      </Fragment>
    )
  }

  childRender () {
    const {
      canEdit,
      tabState,
      simpleName,
      companyLogo,
      companySlogan,
      companyArea,
      companyHiringNeed,
      companyBackground,
      companyRelation,
      saveBtnText,
      saveBtnEnable,
      companyMaster,
      applyTip1,
      applyTip2
    } = this.state
    const {
      company: { companyName }
    } = this.props
    return (
      <Fragment>
        <KeyboardAwareScrollView
          style={styles.container}
          enableAutomaticScroll={true}
          keyboardShouldPersistTaps="handled"
        >
          <View style={styles.contentContainer}>
            <View style={styles.mineCompanyWrap}>
              <Text style={styles.firstTitle}>我的名企</Text>
              {companyMaster === 2 && (
                <View
                  style={[
                    styles.companyMasterWrap,
                    { backgroundColor: '#FFF4E8' }
                  ]}
                >
                  <Text style={[styles.companyMasterTxt, { color: '#FF9310' }]}>
                    主管企业
                  </Text>
                </View>
              )}
              {companyMaster === 1 && (
                <View
                  style={[
                    styles.companyMasterWrap,
                    { backgroundColor: '#F0F0F0' }
                  ]}
                >
                  <Text style={[styles.companyMasterTxt, { color: '#999999' }]}>
                    关联企业
                  </Text>
                </View>
              )}
            </View>
            <CustomBoxShadow style={styles.companyCardShadow}>
              <LinearGradient
                style={styles.companyCard}
                colors={['#65D797', '#5DC9C5']}
              >
                <View style={styles.companyTitView}>
                  <CustomButton
                    onPress={canEdit ? this._companySimpleClick : null}
                  >
                    <Text style={styles.companySimple}>{simpleName}</Text>
                  </CustomButton>
                  <Text style={styles.companyName}>{companyName}</Text>
                </View>
                <CustomBoxShadow style={styles.companyLogoShadow}>
                  <CustomButton
                    style={styles.companyLogoBtn}
                    onPress={canEdit ? this._companyLogoClick : null}
                  >
                    <DefaultImage
                      style={styles.companyLogo}
                      source={{ uri: companyLogo }}
                      errorSource={companyDefaultLogo}
                    />
                  </CustomButton>
                </CustomBoxShadow>
              </LinearGradient>
            </CustomBoxShadow>
            <Text style={styles.secondTitle}>企业slogan</Text>
            <BorderInput
              editable={canEdit}
              value={companySlogan}
              placeholder="如：小米品牌，为发烧而生"
              maxLength={20}
              params="companySlogan"
              onChangeText={this._onChangeText}
            />
          </View>
          <View
            style={[
              styles.scrollableTabView
            ]}
          >
            {this._renderTabBar(tabState)}
            {this._renderFirstScene({ canEdit,
              companyArea,
              companyHiringNeed,
              companyBackground,
              activeTab: tabState.index === 0 })}
            {tabState.routes.length === 2 && this._renderSecondScene({ companyRelation,
              activeTab: tabState.index === 1 })}
          </View>
          <Text style={[styles.firstTitle, styles.contentContainer]}>
            名企权益
          </Text>
          <CustomBoxShadow style={styles.companyRightCardShadow}>
            <View style={styles.companyRightCard}>
              <View style={styles.rightCiycle} />
              <View style={[styles.rightBorder, styles.rightBorder1]} />
              <View style={[styles.rightBorder, styles.rightBorder2]} />
              <CustomImage
                style={styles.rightGold}
                source={require('@/imgC/company/company_famous_gold.png')}
              />
              <CustomImage
                style={styles.rightShadow}
                source={require('@/imgC/company/company_famous_shadow.png')}
              />
              <Text style={styles.companyRight1}>首页展示</Text>
              <Text style={styles.companyRight2}>
                发布的职位展示于首页名企招聘版块
              </Text>
            </View>
          </CustomBoxShadow>
        </KeyboardAwareScrollView>
        {!(companyMaster === 1 || companyMaster === 2) && (
          <View style={styles.bottomWrap}>
            {!!applyTip1 && <Text style={styles.applyTip1}>{applyTip1}</Text>}
            {!!applyTip2 && <Text style={styles.applyTip1}>{applyTip2}</Text>}
            <CustomButton onPress={this.callPhone} style={styles.tipWrap}>
              <Text style={styles.tipText}>客服热线：</Text>
              <Text
                style={[
                  styles.tipText,
                  { textDecorationLine: 'underline', color: '#FFC200' }
                ]}
              >
                {ServiceTelephone}
              </Text>
            </CustomButton>
            {!!saveBtnText && (
              <NextButton
                style={styles.nextButton}
                title={saveBtnText}
                enable={saveBtnEnable}
                onPress={this._nextBtnClick}
              />
            )}
          </View>
        )}
      </Fragment>
    )
  }

  _renderTabBar = tabState => {
    const { routes: tabs = [], index: activeTab } = tabState
    return (
      <View style={styles.scrollableTabViewBar}>
        {tabs.map(({ title, key }, index) => {
          return (
            <CustomButton
              key={key}
              style={[
                styles.tabbarWrap,
                activeTab === index && styles.tabbarWrapActive
              ]}
              params={index}
              onPress={this._onChangeTab}
            >
              <Animatable.Text
                style={[
                  styles.tabbarTitle,
                  activeTab === index && styles.tabbarTitleActive
                ]}
                transition={['fontSize', 'color']}
                easing="ease"
                duration={100}
              >
                {title}
              </Animatable.Text>
            </CustomButton>
          )
        })}
      </View>
    )
  }

  _renderFirstScene = ({
    canEdit,
    companyArea,
    companyHiringNeed,
    companyBackground,
    activeTab }) => {
    return (
      <View
        tabLabel="企业规模"
        style={[styles.contentContainer, !activeTab && { height: 0 }]}
        onLayout={this._onLayoutTab1}
      >
        <Text style={styles.secondTitle}>公司面积</Text>
        <BorderInput
          editable={canEdit}
          value={companyArea}
          unit="（平米）"
          placeholder="请输入公司面积（平米）"
          keyboardType="number-pad"
          params="companyArea"
          onChangeText={this._onChangeText}
        />
        <Text style={styles.secondTitle}>招聘需求</Text>
        <BorderInput
          editable={canEdit}
          value={companyHiringNeed}
          unit="（人）"
          placeholder="请输入招聘需求（人）"
          keyboardType="number-pad"
          params="companyHiringNeed"
          onChangeText={this._onChangeText}
        />
        <View style={styles.bgDisplayWrap}>
          <Text style={styles.secondTitle}>背景展示</Text>
          {!!(companyBackground && canEdit) && (
            <CustomButton
              style={styles.refreshImgBtn}
              onPress={this._uploadImageClick}
            >
              <Animatable.Image
                style={styles.refreshImgIcon}
                source={require('@/imgC/company/company_famous_refresh.png')}
                useNativeDriver={IS_IOS}
                ref={this._handleRefreshImgIconRef}
              />
              <Text style={styles.refreshImgText}>更换</Text>
            </CustomButton>
          )}
        </View>
        {companyBackground ? (
          <CustomImage
            style={styles.uploadedImg}
            source={{ uri: companyBackground }}
          />
        ) : (
          <CustomButton
            style={styles.uploadBtn}
            onPress={this._uploadImageClick}
          >
            <CustomImage
              style={styles.uploadIcon}
              source={require('@/imgC/company/add_black_34.png')}
            />
          </CustomButton>
        )}
        {!!canEdit && (
          <Text style={styles.uploadDesc}>图片尺寸至少大于612*552</Text>
        )}
      </View>
    )
  }

  _renderSecondScene = ({ companyRelation, activeTab }) => {
    return (
      <View
        tabLabel="关联企业"
        style={[styles.secondScene, !activeTab && { height: 0 }]}
      >
        {companyRelation.map((e, i) => {
          return (
            <CustomBoxShadow
              key={e.companyId}
              style={{
                ...styles.relationWrap,
                ...(i === 0 && { marginTop: ScaleS(30) }),
                ...(i === companyRelation.length - 1 && {
                  marginBottom: ScaleS(30)
                })
              }}
            >
              <View style={styles.relationCard}>
                <Text style={styles.relationCompanyName}>
                  {e.companyName}
                </Text>
                {!!e.master && (
                  <View style={styles.relationMasterWrap}>
                    <Text style={styles.relationMasterTxt}>主管企业</Text>
                  </View>
                )}
              </View>
            </CustomBoxShadow>
          )
        })}
      </View>
    )
  }

  _modifyBtnClick = () => {
    // 正常状态下 修改
    LayoutAnimation.easeInEaseOut()
    this.setState({
      companyMaster: 3,
      canEdit: true,
      saveBtnText: '确定',
      saveBtnEnable: true,
      tabState: {
        index: 0,
        routes: [{ key: 'first', title: '企业规模' }]
      }
    })
  }

  _companySimpleClick = () => {
    const {
      company: { companyName }
    } = this.props
    const { simpleName } = this.state
    const saveCallback = simpleName => {
      console.log('saveCallback', simpleName)
      this.setState({
        simpleName
      })
    }
    this.props.navigation.navigate('CommonInputPage', {
      title: '企业简称',
      desc: '*请填写企业简称',
      placeholder: '请输入',
      maxLength: 10,
      value: simpleName || companyName || '',
      saveCallback
    })
  }

  _companyLogoClick = () => {
    const {
      company: { companyName }
    } = this.props
    const { simpleName, companyLogo } = this.state
    const callback = ({ companyLogo }) => {
      this.setState({
        companyLogo
      })
    }
    this.props.navigation.navigate('CompanyAvator', {
      userName: simpleName || companyName,
      userAvator: companyLogo,
      getData: callback
    })
  }

  _onChangeTab = index => {
    console.log('_onChangeTab', index)
    LayoutAnimation.easeInEaseOut()
    const { tabState } = this.state
    this.setState({
      tabState: {
        ...tabState,
        index
      }
    })
  }

  _onChangeText = (value, key) => {
    this.setState({
      [key]: value
    })
  }

  /* 图片选择 begin */
  selectImageModalConfig = () => ({
    selectArr: [
      {
        label: '相册上传'
      },
      {
        label: '拍照上传'
      }
    ],
    titleText: '添加照片',
    onCancel: this._selectModalCancel,
    selectClick: this._selectModalClick
  })

  _handleRefreshImgIconRef = ref => {
    this.refreshImgIconRef = ref
  }

  _uploadImageClick = () => {
    Keyboard.dismiss()
    this.refreshImgIconRef &&
      this.refreshImgIconRef.transition(
        { rotate: '00deg' },
        { rotate: '360deg' },
        800
      )
    this._toggleSelectModal(true)
  }

  _toggleSelectModal = (selectModalShow, callBack) => {
    if (selectModalShow) {
      this.selectModal = showSelectModal(this.selectImageModalConfig())
    } else {
      if (this.selectModal) {
        this.selectModal.close(() => {
          callBack && callBack()
        })
      }
    }
  }

  _selectModalCancel = () => {
    this._toggleSelectModal(false)
  }

  _selectModalClick = index => {
    switch (index) {
      case 0:
        this.selectModal.close(() => {
          multipleAlums({
            maxFiles: 1,
            compressImageMaxWidth: 1500,
            compressImageMaxHeight: 1500
          }).then(images => {
            this._addImage(images[0])
          })
        })
        break
      case 1:
        this.selectModal.close(() => {
          openCamera({
            width: 1500,
            height: 1500
          }).then(image => {
            console.info(image)
            this._addImage(image)
          })
        })
        break
      default:
        this.selectModal.close()
    }
  }

  _addImage = img => {
    const { width, height } = img
    this.companyBGObj = null
    if (width >= 612 && height >= 552) {
      this.setState({
        companyBackground: img.imgPath
      })
      this.companyBGObj = img
    } else {
      CommonToast(`图片尺寸至少大于612*552,当前为${width}*${height}`)
    }
  }

  /* more选择 end */
  _nextBtnClick = () => {
    // 申请中、申请通过未修改时，不能修改
    const {
      canEdit,
      saveBtnEnable,
      saveBtnText,
      companyBackground: uri
    } = this.state
    if (!canEdit) {
      CommonToast(saveBtnText)
      return
    }
    if (!saveBtnEnable) {
      BCompanyApplyFamous.saveButtonEnable(this.state, true)
      return
    }
    ShowLoading()
    new Promise((resolve, reject) => {
      if (uri.startsWith('file://')) {
        // 本地上传
        uploadImage({
          params: { uri, mime: this.companyBGObj.mime, type: 'company' }
        })
          .then(res => {
            this.companyBGObj = null
            this.setState({
              companyBackground: res.data
            })
            resolve({
              background: res.data
            })
          })
          .catch(error => {
            reject(error)
          })
      } else {
        // 网络图片
        resolve({
          background: uri
        })
      }
    })
      .then(({ background }) => {
        const {
          company: { companyId }
        } = this.props
        const {
          companyMaster,
          simpleName,
          companyLogo: logo,
          companySlogan: slogan,
          companyArea: area,
          companyHiringNeed: hiringNeed
        } = this.state
        const { id } = this.applyFamousState || {}
        const companyParams = {
          companyId,
          simpleName,
          logo,
          slogan,
          area,
          hiringNeed,
          background
        }
        if (id) {
          companyParams.id = id
        }
        if (companyMaster === 3) {
          return updateFamous({ params: companyParams })
        } else {
          return applyFamous({ params: companyParams })
        }
      })
      .then(res => {
        const {
          company: { companyId }
        } = this.props
        return applyFamousState({ headers: { companyId } })
      })
      .then(res => {
        if (!isEmptyObjectFn(res.data)) {
          this.applyFamousState = res.data
          this.configState()
        }
      })
      .finally(() => {
        DismissLoading()
      })
  }

  callPhone = () => {
    CustomCallPhone(ServiceTelephone)
  }
}
export default BCompanyApplyFamous
const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  contentContainer: {
    overflow: 'hidden',
    paddingHorizontal: ScaleS(20)
  },
  navigationTitle: {
    fontSize: ScaleT(17),
    color: '#030303',
    fontWeight: '400'
  },
  naviBtn: {
    position: 'absolute',
    right: 20,
    bottom: 8,
    width: 58,
    height: 28,
    borderRadius: 14,
    borderColor: '#000000',
    borderStyle: 'solid',
    borderWidth: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  naviTxt: {
    fontSize: ScaleT(12),
    fontWeight: '600',
    color: '#000000'
  },
  firstTitle: {
    height: ScaleS(67),
    lineHeight: ScaleS(67),
    fontSize: ScaleT(27),
    fontWeight: '500',
    color: '#444444'
  },
  secondTitle: {
    height: ScaleS(70),
    paddingTop: ScaleS(30),
    lineHeight: ScaleS(16),
    fontSize: ScaleT(16),
    fontWeight: '500',
    color: '#444444'
  },
  mineCompanyWrap: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  companyMasterWrap: {
    marginLeft: ScaleS(8),
    width: ScaleS(51),
    height: ScaleS(18),
    borderRadius: ScaleS(3),
    justifyContent: 'center',
    alignItems: 'center'
  },
  companyMasterTxt: {
    fontSize: ScaleT(10),
    fontWeight: '500'
  },
  companyCardShadow: {
    width: ScaleS(335),
    height: ScaleS(122),
    borderRadius: ScaleS(10),
    shadowRadius: ScaleS(40),
    shadowOpacity: 0.25,
    shadowColor: '#9C9C9C',
    shadowOffset: {
      width: 0,
      height: ScaleS(7)
    }
  },
  companyCard: {
    width: ScaleS(335),
    height: ScaleS(122),
    borderRadius: ScaleS(10),
    padding: ScaleS(20),
    flexDirection: 'row',
    alignItems: 'center'
  },
  companyLogoShadow: {
    width: ScaleS(80),
    height: ScaleS(80),
    borderRadius: ScaleS(40),
    shadowRadius: ScaleS(18),
    shadowOpacity: 0.04,
    shadowColor: '#000000',
    shadowOffset: {
      width: 0,
      height: ScaleS(2)
    }
  },
  companyLogoBtn: {
    width: ScaleS(80),
    height: ScaleS(80)
  },
  companyLogo: {
    width: ScaleS(80),
    height: ScaleS(80),
    borderRadius: ScaleS(40),
    resizeMode: 'cover'
  },
  companyTitView: {
    flex: 1,
    justifyContent: 'center'
  },
  companySimple: {
    height: ScaleS(44),
    lineHeight: ScaleS(44),
    fontSize: ScaleT(24),
    fontWeight: '600',
    color: '#FFFFFF'
  },
  companyName: {
    height: ScaleS(34),
    lineHeight: ScaleS(34),
    fontSize: ScaleT(14),
    fontWeight: '400',
    color: '#FFFFFF'
  },
  scrollableTabView: {
    marginTop: ScaleS(24)
  },
  scrollableTabViewBar: {
    width: '100%',
    borderColor: '#F7F7F7',
    borderStyle: 'solid',
    borderTopWidth: ScaleS(5),
    paddingHorizontal: ScaleS(20),
    paddingTop: ScaleS(36),
    paddingBottom: ScaleS(10),
    flexDirection: 'row',
    alignItems: 'flex-end'
  },
  tabbarWrap: {
    height: 25
  },
  tabbarWrapActive: {
    height: 29
  },
  tabbarTitle: {
    fontSize: ScaleT(21),
    width: ScaleS(128),
    lineHeight: 25,
    height: 25,
    fontWeight: '400',
    color: '#CCCCCC'
  },
  tabbarTitleActive: {
    fontSize: ScaleT(25),
    lineHeight: 29,
    height: 29,
    fontWeight: '600',
    color: '#444444'
  },
  secondScene: {
    overflow: 'hidden'
  },
  bgDisplayWrap: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  refreshImgBtn: {
    width: ScaleS(62),
    height: ScaleS(28),
    borderRadius: ScaleS(14),
    borderColor: '#E5E5E5',
    borderStyle: 'solid',
    borderWidth: ONE_PIXEL,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  refreshImgIcon: {},
  refreshImgText: {
    marginLeft: ScaleS(10),
    fontSize: ScaleT(12),
    fontWeight: '400',
    color: '#444444'
  },
  uploadedImg: {
    marginTop: ScaleS(6),
    marginBottom: ScaleS(10),
    width: ScaleS(102),
    height: ScaleS(94)
  },
  uploadBtn: {
    marginTop: ScaleS(6),
    marginBottom: ScaleS(10),
    width: ScaleS(102),
    height: ScaleS(94),
    borderRadius: ScaleS(2),
    borderColor: '#CECECE',
    borderStyle: 'solid',
    borderWidth: ONE_PIXEL,
    justifyContent: 'center',
    alignItems: 'center'
  },
  uploadIcon: {
    width: ScaleS(14),
    height: ScaleS(14)
  },
  uploadDesc: {
    marginBottom: ScaleS(5),
    fontSize: ScaleT(14),
    color: '#CCCCCC'
  },
  companyRightCardShadow: {
    marginHorizontal: ScaleS(20),
    marginVertical: ScaleS(10),
    width: ScaleS(335),
    height: ScaleS(88),
    borderRadius: ScaleS(10),
    shadowRadius: ScaleS(40),
    shadowOpacity: 0.7,
    shadowColor: '#E5E6EA',
    shadowOffset: {
      width: 0,
      height: ScaleS(7)
    }
  },
  companyRightCard: {
    overflow: 'hidden',
    backgroundColor: '#ffffff',
    width: ScaleS(335),
    height: ScaleS(88),
    borderRadius: ScaleS(10),
    position: 'relative',
    paddingLeft: ScaleS(66),
    justifyContent: 'center'
  },
  companyRight1: {
    fontSize: ScaleT(16),
    lineHeight: ScaleT(26),
    fontWeight: '500',
    color: '#444444'
  },
  companyRight2: {
    fontSize: ScaleT(14),
    lineHeight: ScaleT(24),
    fontWeight: '400',
    color: '#C59850'
  },
  rightCiycle: {
    position: 'absolute',
    top: ScaleS(33),
    left: ScaleS(31),
    width: ScaleS(24),
    height: ScaleS(24),
    borderRadius: ScaleS(12),
    backgroundColor: '#FFEBB0'
  },
  rightBorder: {
    position: 'absolute',
    width: ScaleS(16),
    height: ScaleS(16),
    borderRadius: ScaleS(3),
    borderColor: '#444444',
    borderStyle: 'solid',
    borderWidth: ScaleS(2)
  },
  rightBorder1: {
    top: ScaleS(31),
    left: ScaleS(18)
  },
  rightBorder2: {
    top: ScaleS(39),
    left: ScaleS(26)
  },
  rightGold: {
    position: 'absolute',
    top: ScaleS(0),
    right: ScaleS(18)
  },
  rightShadow: {
    position: 'absolute',
    bottom: ScaleS(0),
    right: ScaleS(0)
  },
  relationWrap: {
    marginHorizontal: ScaleS(20),
    marginVertical: ScaleS(8),
    width: ScaleS(335),
    height: ScaleS(62),
    borderRadius: ScaleS(5),
    shadowRadius: ScaleS(40),
    shadowOpacity: 0.25,
    shadowColor: '#9C9C9C',
    shadowOffset: {
      width: 0,
      height: ScaleS(7)
    }
  },
  relationCard: {
    borderRadius: ScaleS(5),
    width: ScaleS(335),
    height: ScaleS(62),
    paddingHorizontal: ScaleS(14),
    position: 'relative',
    justifyContent: 'center',
    backgroundColor: '#FFFFFF'
  },
  relationCompanyName: {
    fontSize: ScaleT(16),
    fontWeight: '400',
    color: '#444444'
  },
  relationMasterWrap: {
    position: 'absolute',
    top: 0,
    right: 0,
    width: ScaleS(52),
    height: ScaleS(22),
    backgroundColor: '#444444',
    borderTopRightRadius: ScaleS(3),
    borderBottomLeftRadius: ScaleS(5),
    justifyContent: 'center',
    alignItems: 'center'
  },
  relationMasterTxt: {
    fontSize: ScaleT(10),
    fontWeight: '500',
    color: '#FFFFFF'
  },
  bottomWrap: {
    width: '100%',
    paddingBottom: ScaleS(10),
    justifyContent: 'center',
    alignItems: 'center'
  },
  applyTip1: {
    marginTop: ScaleS(20),
    fontSize: ScaleT(18),
    lineHeight: ScaleS(38),
    fontWeight: '500',
    color: '#000000'
  },
  applyTip2: {
    fontSize: ScaleT(14),
    lineHeight: ScaleS(34),
    fontWeight: '400',
    color: '#444444'
  },
  tipWrap: {
    marginTop: ScaleS(10),
    height: ScaleS(33),
    flexDirection: 'row',
    alignItems: 'center'
  },
  tipText: {
    fontSize: ScaleT(13),
    fontWeight: '400',
    color: '#CCCCCC'
  },
  nextButton: {
    marginVertical: ScaleS(10)
  }
})
